<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>实时数据 </span>
        </div>
      </div>
      <div class="bzjk_box flex_center" slot="content" :data="top1">
        <div
          class="sjtj_item backgroung flex_between_direction"
          style="color: rgba(0, 192, 255, 0.9)"
        >
          <div class="title flex_center">当日实时产量</div>
          <div
            class="number flex_center"
            style="border-bottom: 3px solid rgba(0, 192, 255, 0.9)"
          >
            <div class="num_top">{{ top1.dayBotleCount || 0 }}</div>
            <div class="num_bottom">箱</div>
          </div>
        </div>
        <div
          class="sjtj_item backgroung flex_between_direction"
          style="color: rgba(255, 153, 0, 0.9)"
        >
          <div class="title flex_center">当日生产计划</div>
          <div
            class="number flex_center"
            style="border-bottom: 3px solid rgba(255, 153, 0, 0.9)"
          >
            <div class="num_top">{{ top1.dayPlanCount || 0 }}</div>
            <div class="num_bottom">标准箱</div>
          </div>
        </div>
        <div
          class="sjtj_item backgroung flex_between_direction"
          style="color: rgba(59, 255, 230, 0.9)"
        >
          <div class="title flex_center">当月累计产量</div>
          <div
            class="number flex_center"
            style="border-bottom: 3px solid rgba(59, 255, 230, 0.9)"
          >
            <div class="num_top">{{ top1.monthCount || 0 }}</div>
            <div class="num_bottom">标准箱</div>
          </div>
        </div>
        <div
          class="sjtj_item backgroung flex_between_direction"
          style="color: rgba(254, 58, 234, 0.9)"
        >
          <div class="title flex_center">当月完成计划进度</div>
          <div
            class="number flex_center"
            style="border-bottom: 3px solid rgba(254, 58, 234, 0.9)"
          >
            <div class="num_top_baifenbi">{{ top1.monthRate || 0 }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_center">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>统计分析 </span>
        </div>
      </div>
      <div class="echartsBox">
        <!-- 02完成分析 -->
        <StrokeTitle3
          title="计划完成分析"
          class=""
          style="width: 49.6%; height: 47.6%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange2"
            />
          </div>
          <div class="flex_center Echarts">
            <PieImg3
              :data="bottom2a"
              :isLenged="false"
              :showLabel="true"
              itemWidth="1"
              cirLeft="2.75"
              :img="require('@/assets/images/echarts/djdscwc.png')"
              :color="['#00ebcd', '#ff7474']"
            />
            <div
              style="width: 100%; height: 100%"
              class="flex_center"
              v-if="bottom2b.length > 0"
            >
              <div class="clzdjd_box">
                <div
                  class="clzdjd_item flex_center"
                  v-for="(item, index) in bottom2b"
                  :key="index"
                >
                  <div class="clzdjd_item_left flex_between">
                    <div
                      class="bigCir flex_center"
                      :style="{
                        border: '1px solid rgba(' + color[index] + ',0.4)',
                      }"
                    >
                      <div
                        class="smallCir"
                        :style="{
                          border: '1px solid rgba(' + color[index] + ',1)',
                        }"
                      ></div>
                      <div
                        class="border"
                        :style="{ background: 'rgba(' + color[index] + ',1)' }"
                      ></div>
                    </div>
                  </div>
                  <div class="clzdjd_item_right flex_center">
                    <div
                      class="lt"
                      :style="{ color: 'rgba(' + color[index] + ',1)' }"
                    >
                      {{ item.name }}
                    </div>
                    <div
                      class="rt"
                      :style="{ color: 'rgba(' + color[index] + ',1)' }"
                    >
                      {{ item.value }}标准箱
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle3>
        <!-- 01分类分析 -->
        <StrokeTitle3
          title="计划分类分析"
          class=""
          style="width: 49.6%; height: 47.6%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange1"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productPlanCount2All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <XRow
              class="cntjEcharts"
              :data="bottom1"
              barRight="15%"
              barLeft="5%"
              barWidth="6"
              xUnit="标准箱"
              :isTooltip="false"
            ></XRow>
          </div>
        </StrokeTitle3>

        <!-- 03停机分析 -->
        <StrokeTitle3
          title="停机分析"
          class=""
          style="width: 49.6%; height: 47.6%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange3"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productDayCount4All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts tjfx">
            <XRow
              class="cntjEcharts"
              :data="bottom3.list"
              @xRowEcharts="xRowEcharts"
              itemStyleLabel="value2"
              barRight="32%"
              barLeft="11%"
              barWidth="6"
              :xUnit="'时（总时长：' + bottom3.all + ')'"
              :isTooltip="false"
            ></XRow>
            <!-- <div class="tjfx_left" v-if="bottom3.length > 1">
              <div class="tjfx_left_top">
                <div class="zctj">{{ bottom3[1].name }}</div>
                <div class="tjsz_lt">
                  <div class="tjcs">
                    <div class="tjcs_lt">停机次数</div>
                    <div class="tjcs_rt">{{ bottom3[1].value1 }}</div>
                  </div>
                  <div class="tjsc">
                    <div class="tjsc_lt">停机时长</div>
                    <div class="tjsc_rt">{{ bottom3[1].value2 }}</div>
                  </div>
                  <div class="zb">
                    <div class="zb_lt">占比</div>
                    <div class="zb_rt">{{ bottom3[1].value3 }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tjfx_center">
              <PieImg3 :data="bottom3a" :isLenged="false" :showLabel="false" length="2" itemWidth="1" cirLeft="center" :img="require('@/assets/images/echarts/32.png')" :color="['#23c3ff','#3bffe6']" />
            </div>
            <div class="tjfx_right" v-if="bottom3.length> 0">
              <div class="tjfx_left_top">
                <div class="yctj">{{ bottom3[0].name ||0}}</div>
                <div class="tjsz_rt">
                  <div class="tjcs">
                    <div class="tjcs_lt">停机次数</div>
                    <div class="tjcs_rt">{{ bottom3[0].value1 ||0}}</div>
                  </div>
                  <div class="tjsc">
                    <div class="tjsc_lt">停机时长</div>
                    <div class="tjsc_rt">{{ bottom3[0].value2||0 }}</div>
                  </div>
                  <div class="zb">
                    <div class="zb_lt">占比</div>
                    <div class="zb_rt">{{ bottom3[0].value3||0 }}</div>
                  </div>
                </div>
              </div>
            </div>-->
          </div>
        </StrokeTitle3>
        <!-- 04生产天数 -->
        <StrokeTitle3
          title="主要产成品产量"
          class=""
          style="width: 49.6%; height: 47.6%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange4"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="planCount4All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <XRow
              barWidth="6"
              :data="bottom4"
              xUnit="标准箱"
              barRight="12%"
              barLeft="5%"
              slot="content"
            />
            <!-- <div class="scts flex_center">
              <div class="scts_ts">
                <div class="tu">{{ bottom4.weekdays || 0 }}</div>
                <div class="wenzi">生产天数</div>
              </div>
              <div class="center"></div>
              <div class="scts_ts">
                <div class="tu tu_2">{{ bottom4.restDay || 0 }}</div>
                <div class="wenzi">未生产天数</div>
              </div>
            </div> -->

            <!-- <PieImg3
              :data="data4"
              :isLenged="false"
              :showLabel="true"
              length="2"
              itemWidth="1"
              cirLeft="2.5"
              :img="require('@/assets/images/echarts/33.png')"
              class="center2"
            /> -->
            <!-- <div class="jxb_right flex_center">
              <div class="left">
                <div class="big_cir flex_center">
                  <div class="small_cir"></div>
                </div>
                <div class="and"></div>
                <div class="big_cir flex_center big_cir_blue">
                  <div class="small_cir small_cir_blue"></div>
                </div>
              </div>
              <div class="right">
                <div
                  class="item flex_between"
                  v-for="(item, index) in data4"
                  :key="index"
                  v-show="index < 2"
                  :class="index == 1 ? 'item_blue' : ''"
                >
                  <div class="title">
                    {{ item.name }}
                  </div>
                  <div class="number">{{ item.value }}次</div>
                </div>
              </div>
              <div class="rt_bottom">
                <div class="qingjia">
                  <div class="wenzi">请假</div>
                  <div class="num">5天</div>
                </div>
                <div class="jiaban">
                  <div class="wenzi">加班</div>
                  <div class="num">5天</div>
                </div>
              </div>
            </div> -->
          </div>
        </StrokeTitle3>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import {
  ProductDayCount1,
  ProductPlanCount2,
  ProductPlanCount3,
  ProductDayCount4_1,
  PlanCount4,
  ProductDayCount5,
} from "@/api/produce/index.js";
import { GetBoxDay } from "@/api/echarts/index";
import StrokeTitle3 from "@/components/myComponents/stroke/title3.vue"; //容器
import PieImg2 from "@/components/echarts/pie/img2.vue";
import PieImg3 from "@/components/echarts/pie/img3.vue";
export default {
  components: {
    StrokeTitle3,
    PieImg2,
    PieImg3,
  },
  name: "ProduceEcharts",
  data() {
    return {
      model: "month",
      //实时数据
      top1: {
        dayBotleCount: "", //当日实时产量
        dayPlanCount: "", //当日生产计划
        monthCount: "", //当月累计产量
        monthRate: "", //当月完成计划进度
      },
      //统计分析-分类分析
      bottom1: [],
      bottom1Form: {
        pDateEnd: this.$getMonth("e", 0),
        pDateStart: this.$getMonth("s", 0),
        all: "",
      },
      //统计分析-完成分析
      color: ["35, 195, 255", "0, 235, 205", "255, 116, 116"],
      //计划完成度
      bottom2a: [],
      //计划完成度
      bottom2b: [],
      //计划完成度
      bottom2Form: {
        pDateEnd: this.$getMonth("e", 0),
        pDateStart: this.$getMonth("s", 0),
      },
      //统计分析-停机分析
      bottom3: { all: 0, list: [] },
      // bottom3a: [],
      bottom3Form: {
        stopDateEnd: this.$getMonth("e", 0),
        stopDateStart: this.$getMonth("s", 0),
        all: "",
      },
      //生产天数
      bottom4: [],
      bottom4Form: {
        pDateStart: this.$getMonth("s", 0),
        pDateEnd: this.$getMonth("e", 0),
        deptId: "101",
        all: "",
      },
      timer2: null,
    };
  },
  beforeDestroy() {
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
  deactivated() {
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
  mounted() {
    this.productDayCount1(); //实时数据
    this.productPlanCount2(); //分类分析
    this.productPlanCount3(); //完成分析
    this.productDayCount4(); //停机分析
    this.planCount4(); //生产天数
    this.getBottleDay();
    if (this.timer2) {
      clearInterval(this.timer2);
    }
    this.timer2 = setInterval(() => {
      this.getBottleDay();
      this.productDayCount1();
    }, 10000);
  },
  activated() {
    this.productDayCount1(); //实时数据
    this.productPlanCount2(); //分类分析
    this.productPlanCount3(); //完成分析
    this.productDayCount4(); //停机分析
    this.planCount4(); //生产天数
    this.getBottleDay();
    if (this.timer2) {
      clearInterval(this.timer2);
    }
    this.timer2 = setInterval(() => {
      this.getBottleDay();
      this.productDayCount1();
    }, 10000);
  },
  methods: {
    //首页-产能统计-当日产量
    getBottleDay() {
      // GetBottleDay().then((res) => {
      //   if (res.code == 200) {
      //     let number = parseInt(res.data.bottle / 24);
      //     this.top1.dayBotleCount = number;
      //   }
      // });
      GetBoxDay().then((res) => {
        if (res.code == 200) {
          this.top1.dayBotleCount = res.data.bottle;
          //  this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
          // let number = parseInt(res.data.bottle / 24)
          // .toString()
          // .split("");
          // console.log(number)
          // this.left2.dayBotleCountPing = number;
        }
      });
    },
    //实时数据
    productDayCount1() {
      ProductDayCount1().then((res) => {
        if (res.code == 200) {
          this.top1.dayPlanCount = res.data.dayPlanCount;
          this.top1.monthCount = res.data.monthCount;
          this.top1.monthRate = res.data.monthRate;
        }
      });
    },
    //统计分析-分类分析
    productPlanCount2() {
      ProductPlanCount2(this.bottom1Form).then((res) => {
        if (res.code == 200) {
          this.bottom1 = res.data;
        }
      });
    },
    //统计分析-分类分析-全部
    productPlanCount2All() {
      let obj = JSON.parse(JSON.stringify(this.bottom1Form));
      obj.all = "111";
      ProductPlanCount2(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = " 标准箱";
          this.$refs.AllDialog.right.unit = "";
          // this.$refs.AllDialog.tableData.column[1].prop = "value2";
          this.$refs.AllDialog.tableData.column[4].prop = "value";
          this.$refs.AllDialog.tableData.data = res.data;
        }
        this.$refs.AllDialog.dialogTableVisible = true;
      });
    },
    radioChange1(event) {
      this.bottom1Form.pDateStart = event[0];
      this.bottom1Form.pDateEnd = event[1];
      this.productPlanCount2();
    },
    //统计分析-完成分析
    productPlanCount3() {
      ProductPlanCount3(this.bottom2Form).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 3) {
            res.data = res.data.slice(0, 3);
          }
          this.bottom2a = JSON.parse(JSON.stringify(res.data));
          this.bottom2a = this.bottom2a.slice(1);
          this.bottom2b = JSON.parse(JSON.stringify(res.data));
        }
      });
    },
    radioChange2(event) {
      this.bottom2Form.pDateStart = event[0];
      this.bottom2Form.pDateEnd = event[1];
      this.productPlanCount3();
    },

    //统计分析-停机分析
    productDayCount4() {
      ProductDayCount4_1(this.bottom3Form).then((res) => {
        if (res.code == 200) {
          this.bottom3.list = res.data.list;
          this.bottom3.all = res.data.total;
          // let mmArr = [];
          // let hhArr = [];
          let num =0
          for (let item of this.bottom3.list) {
            item.value = item.value1;
            num+=Number(item.value1)
          }
          for (let item of this.bottom3.list) {
            item.value2 = item.value2+'(占比:'+(Number(item.value1)/num*100).toFixed(2)+'%)';
          }
          // let array = JSON.parse(JSON.stringify(this.bottom3.list));
          // for (let item of array) {
          //   let str = item.value2.replace("分钟", "");
          //   console.log(str)
          //   mmArr.push(str.split("小时")[1]);
          //   hhArr.push(str.split("小时")[0]);
          // }
          // console.log(hhArr,mmArr);
          // console.log(this.bottom3.list)
        }
        
      });
    },
    //统计分析-停机分析-全部
    productDayCount4All() {
      let obj = JSON.parse(JSON.stringify(this.bottom3Form));
      obj.all = "111";
      ProductDayCount4_1(obj).then((res) => {
        if (res.code == 200) {
          for (let item of res.data.list) {
            item.value = item.value1;
          }
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.tableData.column[4].prop = "value2";
          this.$refs.AllDialog.tableData.data = res.data.list;
        }
        this.$refs.AllDialog.dialogTableVisible = true;
        this.$refs.AllDialog.right.unit = "";
      });
    },
    //停机分析页面跳转
    xRowEcharts(e) {
      this.$router.push({
        path: "/produce/stop/stop",
        query: {
          eqpName: e.name,
          stopDateStart: this.bottom3Form.stopDateStart + " 00:00:00",
          stopDateEnd: this.bottom3Form.stopDateEnd + " 00:00:00",
        },
      });
    },
    radioChange3(event) {
      this.bottom3Form.stopDateStart = event[0];
      this.bottom3Form.stopDateEnd = event[1];
      this.productDayCount4();
    },
    //统计分析-生产天数
    productDayCount5() {
      ProductDayCount5(this.bottom4Form).then((res) => {
        if (res.code == 200) {
          this.bottom4 = res.data;
        }
      });
    },
    //主要产成品产量
    planCount4() {
      PlanCount4(this.bottom4Form).then((res) => {
        this.bottom4 = res.data;
        for (let item of this.bottom4) {
          item.value = Number(item.value).toFixed(0);
        }
      });
    },
    //主要产成品产量-全部
    planCount4All() {
      let obj = JSON.parse(JSON.stringify(this.bottom4Form));
      obj.all = "111";
      PlanCount4(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = " 标准箱";
          for (let item of res.data) {
            item.name = item.name + " (计划量:" + item.value2 + ")";
            item.value = Number(item.value).toFixed(0);
          }
          this.$refs.AllDialog.tableData.data = res.data;
          this.$refs.AllDialog.right.unit = "";
        }
        this.$refs.AllDialog.dialogTableVisible = true;
      });
    },
    radioChange4(event) {
      this.bottom4Form.pDateStart = event[0];
      this.bottom4Form.pDateEnd = event[1];
      this.planCount4();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main{
  padding-bottom: 0;
}
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content_top,
  .content_center {
    width: 100%;
    height: 69.8%;
    .title_box {
      position: relative;
      box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);
      .top {
        height: 40px;
        width: 100%;
        border-bottom: 1px solid #2a8cf04a;
        display: flex;
        padding: 0 15px;
        align-items: center;
        .border {
          width: 3px;
          height: 16px;
          background: #06ffff;
        }
        span {
          font-size: 16px;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          font-weight: R;
          text-align: left;
          margin-left: 10px;
          color: #ffffff;
        }
      }
    }
  }
  .content_center {
    .echartsBox {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0.8% 0.8% 0.5%;
      .scts {
        width: 60%;
        height: 150px;
        .scts_ts {
          width: 120px;
          height: 80%;
          .tu {
            width: 105px;
            height: 105px;
            background-image: url("~@/assets/images/echarts/zu180.png");
            background-size: 100% 100%;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            color: #3bffe6;
            font-weight: 700;
            font-size: 22px;
          }
          .tu_2 {
            color: #1fb8f1;
            background-image: url("~@/assets/images/echarts/zu180_1.png");
            background-size: 100% 100%;
          }
          .wenzi {
            width: 100px;
            height: 22px;
            margin-top: 10px;
            text-align: center;
            background-image: url("~@/assets/images/echarts/圆角矩形 1.png");
            background-size: 100% 100%;
            color: #03e6f5;
            font-size: 14px;
          }
        }
        .center {
          width: 25%;
          height: 100%;
        }
      }
    }
  }

  .content_top {
    height: 23.8%;
    border-bottom: 4px solid rgba(9, 72, 141, 1);
  }
  .bzjk_box {
    width: 100%;
    height: calc(100% - 40px);
    padding: 0px 1%;
    .sjtj_item {
      width: 24%;
      height: 125px;
      margin: 0px 1%;
      background: linear-gradient(
        180deg,
        rgba(14, 81, 141, 0.5) 0%,
        rgba(18, 81, 141, 0.5) 100%
      );
      border: 1px solid #2489ee71;
      padding: 3px;
      position: relative;
      .title {
        font-size: 17px;
        width: 100%;
        height: 44%;
        background: rgba(40, 107, 173, 0.6);
        letter-spacing: 1px;
        font-weight: 400;
      }
      .number {
        width: 100%;
        height: 75%;
        background: rgba(35, 107, 173, 0.6);
        background-image: url("~@/assets/images/echarts/zhuangshi.png");
        background-size: 100% 100%;
        margin-top: 1%;
        position: relative;
        .num_top {
          font-size: 30px;
          position: absolute;
          top: 10%;
          font-weight: 500;
        }
        .num_bottom {
          position: absolute;
          bottom: 1.7%;
          color: white;
          font-size: 15px;
        }
        .num_top_baifenbi {
          position: absolute;
          top: 15%;
          font-size: 40px;
        }
      }
    }
  }
  .Echarts {
    height: calc(100% - 50px);
  }
  .center2 {
    width: 390px;
  }
  .center_echarts {
    height: 180px;
  }
  .clzdjd_box {
    width: 75%;
    height: 130px;
    position: relative;
    left: -5%;
    .clzdjd_item {
      height: 45px;
      .clzdjd_item_left {
        width: 13%;
        height: 100%;
        text-align: left;
        position: relative;
        .index {
          position: absolute;
          color: #ffffff;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          margin: auto;
        }
        .bigCir {
          width: 20px;
          height: 20px;
          border: 1px solid #02d5c2;
          border-radius: 50%;
          position: relative;
          left: -30%;
          .smallCir {
            width: 10px;
            height: 10px;
            border: 1px solid #02d5c2;
            border-radius: 50%;
          }
          .border {
            width: 1px;
            height: 12px;
            background: #02d5c2;
            position: absolute;
            top: 130%;
          }
        }
      }
      .clzdjd_item_right {
        width: 78%;
        height: 75%;
        padding-right: 5px;
        margin-left: 1%;
        max-width: 435px;
        max-height: 124px;
        text-align: right;
        background: linear-gradient(
          180deg,
          rgba(44, 119, 187, 0.6) 0%,
          rgba(18, 81, 141, 0.6) 100%
        );
        border: 1px solid rgba(52, 134, 218, 0.6);
        font-size: 15px;
        color: #00ebcd;
        .lt {
          width: 48%;
          text-align: left;
          padding-left: 5px;
        }
        .rt {
          width: 51%;
          padding-left: 0px;
          font-weight: 700;
        }
      }
    }
    .clzdjd_item:last-child .border {
      width: 0 !important;
    }
  }
  .tjfx {
    width: 100%;
    // height: 100%;
    height: calc(100% - 50px);
    position: relative;
    .tjfx_left,
    .tjfx_right {
      background-image: url("~@/assets/images/echarts/33_left.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 280px;
      height: 140px;
      margin-top: -10px;
      .tjfx_left_top {
        position: relative;
        .zctj {
          position: absolute;
          font-size: 14px;
          left: 28%;
          top: 3.5px;
          color: white;
        }
        .yctj {
          position: absolute;
          font-size: 14px;
          left: 49%;
          top: 3.5px;
          color: white;
        }
        .tjsz_lt,
        .tjsz_rt {
          position: absolute;
          top: 36.5px;
          left: 10px;
          width: 210px;
          height: 100px;
          font-size: 15px;
          // background: red;
          color: white;
          .tjcs,
          .tjsc,
          .zb {
            width: 100%;
            height: 10px;
            display: inline-flex;
            margin-top: 12px;
            margin-left: 6px;
            .tjcs_lt,
            .tjsc_lt,
            .zb_lt {
              // width: 70px;
              width: 65px;
              height: 15px;
              background-image: url("~@/assets/images/echarts/33_bc.png");
              background-size: 100% 100%;
            }
            .tjcs_rt,
            .tjsc_rt,
            .zb_rt {
              color: #3bffe6;
              font-size: 14px;
              text-shadow: 1px 0px 3px #3bffe6;
            }
          }
        }
        .tjsz_rt {
          left: 65px;
          .tjcs,
          .tjsc,
          .zb {
            width: 100%;
            height: 10px;
            display: inline-flex;
            margin-top: 12px;
            margin-left: 14px;
            .tjcs_rt,
            .tjsc_rt,
            .zb_rt {
              color: #23c3ff;
              font-size: 15px;
              text-shadow: 1px 0px 3px #23c3ff;
            }
          }
        }
      }
    }
    .tjfx_center {
      margin-top: 15px;
      width: 130px;
      height: 140px;
    }
    .tjfx_right {
      width: 280px;
      height: 140px;
      background-image: url("~@/assets/images/echarts/33_right.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
